<template>
  <view class="wrap">
    <view class="l-betweenCenter input-wrap">
      <input
        v-model="form.weight"
        placeholder="请输入"
        placeholder-style="color: #e5e5e5"
        focus
        type="digit"
        maxlength="8"
        style="
          font-size: 46rpx;
          width: 320rpx;
          height: 120rpx;
          border: 2rpx solid #e5e5e5;
          border-radius: 10rpx;
          padding: 0 20rpx;
        "
      />
      <u--text
        size="46rpx"
        color="#888888"
        margin="0 0 0 20rpx"
        :text="unit === '1' ? '千克(kg)' : '斤'"
      ></u--text>
    </view>
    <view class="l-row list-wrap">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        :class="['l-center item', { active: item.id === form.type }]"
        @click="onChoose(item)"
      >
        <text class="text">{{ item.title }}</text></view
      >
    </view>
    <view :class="['btn-large', { disabled: btnDisable }]" @click="submit"
      >保存</view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnDisable: false,
      unit: "",
      form: {
        date: "",
        weight: "",
        type: "0",
      },
      list: [
        {
          id: "0",
          title: "随记",
        },
        {
          id: "1",
          title: "起床空腹",
        },
        {
          id: "2",
          title: "睡前",
        },
        {
          id: "3",
          title: "正餐前",
        },
        {
          id: "4",
          title: "正餐后",
        },
      ],
    };
  },
  onShow() {
    this.unit = uni.getStorageSync("unit");
  },
  methods: {
    onChoose(item) {
      this.form.type = item.id;
    },
    async submit() {
      if (this.btnDisable) return;
      if (!this.form.weight) {
        this.$toast("请输入体重");
        return;
      }
      // 去掉前面的0
      this.form.weight = this.form.weight.replace(/^0+/, "");
      // 校验weight是否为整数活浮点数，小数点后必须有数字
      const reg = /^\d{1,3}(\.\d+)?$/;
      if (!reg.test(this.form.weight.toString())) {
        this.$toast("请输入合理体重...");
        return;
      }
      if (this.form.weight > 999.9) {
        this.$toast("请输入合理体重...");
        return;
      }
      const history = uni.getStorageSync("history");
      this.form.date = this.$moment().format("YYYY-MM-DD HH:mm:ss");
      const filter = history.filter(
        (ele) => ele.date.slice(0, 10) === this.form.date.slice(0, 10)
      );
      if (filter.length >= 20) {
        this.$toast("每天最多记录20次哦~");
        return;
      }
      uni.showLoading({
        title: "保存中...",
      });
      this.btnDisable = true;
      this.form.weight = Number(this.form.weight).toFixed(1);
      const weight =
        this.unit === "1" ? this.form.weight * 2 : this.form.weight;
      const record = {
        ...this.form,
        weight: Number(weight).toFixed(1),
      };
      history.unshift(record);
      uni.setStorageSync("history", history);
      this.$toast("记录成功！");
      this.$store.dispatch("user/addRecord", record);
      setTimeout(() => {
        uni.hideLoading();
        this.$back();
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding: 30rpx;
  .input-wrap {
    position: relative;
  }
  .list-wrap {
    margin-top: 20rpx;
    flex-wrap: wrap;
    .item {
      margin: 10rpx;
      width: 210rpx;
      border: 2rpx solid #e5e5e5;
      height: 120rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: $uni-font-size-lg;
      color: #333;
      border-radius: 20rpx;
      &.active {
        background-color: $uni-color-primary !important;
        color: #ffffff;
      }
    }
  }
  .btn-large {
    margin: 30rpx auto 0;
    width: 100%;
    &.disabled {
      opacity: 0.5;
    }
  }
}
</style>
